<template>
  <div class="tips-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">视图设置</el-divider>
      </div>
      <el-form-item label="区域高度" v-if="!!(optionsInfo.contentHeight)">
        <el-input-number :min="0" size="small" v-model="optionsInfo.contentHeight"/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            :predefine="predefineColors"
            show-alpha v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
      <el-form-item label="视图模式">
        <el-select
            v-model="optionsInfo['viewMode']"
            placeholder="请选择"
        >
          <el-option
              v-for="item in viewModelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">温馨提示设置</el-divider>
      </div>
      <el-form-item label="温馨提示" class="column-area">
        <el-input :min="0" type="textarea" size="small" :autosize="{ minRows: 2, maxRows: 4 }" class="hide-spin-button"
                  v-model="optionsInfo.contentInfo"/>
      </el-form-item>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo.scrollable"/>
      </el-form-item>
      <el-form-item label="滚动速度(设备比例*19.2*速率/s)" v-if="!!(optionsInfo.scrollable)"
                    class="column-area">
        <el-input-number :precision="1" :min="1" :max="20" size="small" v-model="optionsInfo.speed"/>
      </el-form-item>
    </div>

    <div class="list-item-setting" v-if="optionsInfo.viewMode===2">
      <div class="title-info">
        <el-divider content-position="left">二维码设置</el-divider>
      </div>
      <el-form-item label="提示" class="column-area">
        <el-input :min="0" type="textarea" size="small" :autosize="{ minRows: 2, maxRows: 4 }" class="hide-spin-button"
                  v-model="optionsInfo.codeTips"/>
      </el-form-item>
      <el-form-item class="logo-area-set" label="二维码">
        <el-button type="primary" @click="handleSelects('codeAreaUrl',optionsInfo.codeAreaUrl)">选择素材</el-button>
        <div class="picture-wrap">
          <template
            v-if="
              !!(
                !!optionsInfo?.codeAreaUrl &&
                !!optionsInfo?.codeAreaUrl?.length &&
                !!optionsInfo?.codeAreaUrl[0].url
              )
            "
          >
            <img
              :src="`${optionsInfo.codeAreaUrl[0]?.url}`"
              alt="医院信息"
            />
            <p class="icon-wrap" @click="handleDeletePicture('codeAreaUrl')">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div class="el-upload el-upload--text" @click="handleSelects('codeAreaUrl',optionsInfo.codeAreaUrl)">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionsInfo.codeColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">内容设置</el-divider>
      </div>
      <el-form-item label="字体大小">
        <el-input-number :min="0" size="small" v-model="optionsInfo.listFontSize"/>
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo.listFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionsInfo.listFontColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>
      <el-form-item label="文本位置" v-if="optionsInfo.contentLocation">
        <el-select v-model="optionsInfo.contentLocation" placeholder="请选择">
          <el-option
            v-for="item in contentLocationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <!--选择图片的弹层-->
    <UpdatePicture
      :visible="PictureInfos.visible"
      :info="PictureInfos.info"
      @handleCancel="handleCancels"
      @handleSure="handleSures"
    />
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
import UpdatePicture from "@c/public/layer/template/updatePicture/index.vue";

export default {
  name: "noticeConfig-editor",

  componentName: "noticeConfig-editor",

  mixins: [],

  components: {
    UpdatePicture
  },

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      fontWeightOptions: types['fontWeightOptions'],
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      PictureInfos:{
        visible: false,
        info: 1,
      },
      iconOptions: [
        {
          value: 'volume',
          label: '图标1'
        },
        {
          value: 'bell',
          label: '图标2'
        }
      ],
      viewModelOptions: [
        {
          value: 1,
          label: "视图一",
        },
        {
          value: 2,
          label: "视图二",
        }
      ],
      contentLocationList: [
        {
          value: "left",
          label: "左",
        },
        {
          value: "center",
          label: "中",
        }
      ]
    }
  },

  methods:{
    // 选择图片
    handleSelects(val, content) {
      let params = Object();
      switch (val) {
        case "dept":
        default:
          let content2 = !!(content?.length && content[0]?.url) ? content : "";
          Reflect.set(params, "updataType", val);
          Reflect.set(params, "type", "image");
          Reflect.set(params, "multiple", false);
          Reflect.set(params, "content", content2 || "");
          break;
      }
      Reflect.set(this.PictureInfos, "visible", true);
      Reflect.set(this.PictureInfos, "info", params);
    },
    handleCancels(){
      Reflect.set(this.PictureInfos, "visible", false);
    },
    // 替换LOGO
    handleSures(valInfo) {
      let {key, val} = valInfo;
      Reflect.set(this.optionsInfo, key, val);
    },
    // 删除logo
    handleDeletePicture(value) {
      Reflect.set(this.optionsInfo, value, []);
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }
  }

}
.logo-area-set{
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  .picture-wrap {
    margin: 10px 0 20px 0;
    position: relative;
    overflow: hidden;

    img {
      border-radius: 12px;
      overflow: hidden;
      width: 120px;
      display: block;
    }

    .icon-wrap {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      border-radius: 0 0 100px 0;

      .icon-delete {
        font-weight: bold;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .el-upload {
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      box-sizing: border-box;
      width: 108px;
      height: 108px;
      cursor: pointer;
      line-height: 116px;
      vertical-align: top;

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }

      .el-icon-plus {
        font-size: 1.25rem;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
}


</style>
